<template>
  <!-- 使用模块A里面的username -->
  <div>{{$store.state.a.username}}</div>
  <!-- 使用模块B里面的username -->
  <div>{{$store.state.b.username}}</div>

  <!-- 使用模块A里面的getters -->
  <!-- 在命名空间的写法  ...[模块名/命名空间] -->
  <div>{{$store.getters['a/changename']}}</div>
    <!-- 使用模块B里面的getters -->
  <div>{{$store.getters['b/changename']}}</div>

  <button @click="mutationsFn">mutationsFn</button>
  <button @click="actionsFn">actionsFn</button>
</template>

<script>
    import {useStore} from 'vuex'
    export default{
        name:'App',
        setup(){
          const store = useStore()
          const mutationsFn=()=>{
            // 提交B模块的修改
            this.$store.commit('b/updatename');
          }
          const actionsFn=()=>{
            // 调用B模块的actions
            $store.dispatch('b/updatename');
          }
          return {mutationsFn,actionsFn}
        }
    }
</script>

<style>

</style>